<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑帮助内容</title>
    <%@ include file="/WEB-INF/layouts/index-header.jsp" %>
    <link rel="stylesheet" href="${staticPath}/admin/lib/nestable/jquery.nestable.css"/>
    <link rel="stylesheet" href="${staticPath}/admin/lib/Font-Awesome/css/font-awesome.min.css"/>
    <script type="text/javascript" src="${staticPath}/admin/lib/nestable/jquery.nestable.js"></script>
    <script type="text/javascript" src="${staticPath}/admin/tcsf/tcsf.nestable.js"></script>
    <script src="${staticPath}/admin/tcsf/wg_listToTree1.1.js"></script>
    <script src="${staticPath}/sortable/tcsf.nestable.js"></script>

    <style type="text/css">
        body.dragging, body.dragging * {
            cursor: move !important;
        }

        .dragged {
            position: absolute;
            opacity: 0.5;
            z-index: 2000;
        }

        ol.example li.placeholder {
            position: relative;
            /** More li styles **/
        }

        ol.example li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }

        li {
            font-size: 15px;
            cursor: pointer;
            margin: 3px;
        }

        .tpanel .panel-title {
            border-bottom: 1px solid #E7EAEC;
        }

        .dd-handle {
            background: #FFF;
        }

        .dd-handle .op {
            position: absolute;
            right: 10px;
            top: 0px;
            bottom: 0px;
            line-height: 32px;
        }

        .dd-handle .op div {
            display: inline-block;
            margin-left: 5px;
        }

        .dd-handle .op div.modify {
            color: #19AA8D;
        }

        .dd-handle .op div.delete {
            color: #F57575;
        }

        .tpanel .panel-content {
            padding-top: 10px;
        }

        .myOverflow {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin-top: 5px;
        }

    </style>
</head>
<body>
<div style="text-align: center;">
    <h4>拖拽下方内容标题排序</h4>
    <div class="dd" style="height: 350px;overflow: auto">
        <%--<ol class="dd-list">--%>
        <%--<li class="dd-item" value="${helpArticle.id}" data-id="${helpArticle.id}">--%>
        <%--<div class="dd-handle">--%>
        <%--<span>${helpArticle.title}</span>--%>
        <%--</div>--%>
        <%--</li>--%>
        <%--</ol>--%>
    </div>
    <div class="row" style="padding-top:15px;padding-bottom:15px;">
        <div class="col-sm-6">
            <button type="button" class="btn btn-default" onclick="saveSort()" style="padding-left:12px;padding-right:12px;">保存顺序</button>
        </div>
    </div>

</div>
<script type="text/javascript">
    $(function () {
        $('.dd').nestable({maxDepth: 3});

        <%--$.getJSON('${ctx}/admin/helparticle/articleList', function (result) {--%>
        <%--if (result.code == 'OK') {--%>
        <%--fillData(result.body);--%>
        <%--}--%>
        <%--});--%>

        generateNestableTree('${ctx}/admin/helparticle/articleList', '.dd', 'modifyMenu', 'deleteMenu');
    })

    function saveSort() {
        var json = $('.dd').nestable('serialize');
        $.ajax({
            type: "POST",
            url: '${ctx}/admin/helparticle/save-sort',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(json),
            dataType: "json",
            success: function (resp) {
                if (resp.code == 'OK') {
                    topLayer.msg('保存成功', {icon: 1});
                    setTimeout(function () {
                        topLayer.closeAll();
                        window.location.href = '${ctx}/admin/helparticle';
                    }, 500);
                } else {
                    topLayer.msg(resp.message, {icon: 2});
                }
            },
            error: function (message) {
                topLayer.msg(message, {icon: 2});
            }
        });
    }


</script>
</body>
</html>
